// import { useHistory } from 'react-router-dom'
import ArticleItem from '@/pages/Home/component/ArticleItem'
import { useAppDispatch, useAppSelector } from '@/store/hook'
import { getSearchAction } from '@/store/reducers/search'
import { NavBar } from 'antd-mobile'
import { useEffect } from 'react'
import { useNavigate, useSearchParams } from 'react-router-dom'

import styles from './index.module.scss'

const Result = () => {
  // 跳转
  const navigate = useNavigate()
  // 获取查询参数
  const [search] = useSearchParams()
  const q = search.get('q')
  // 调用redux
  const dispatch = useAppDispatch()
  useEffect(() => {
    if (q !== null) {
      dispatch(getSearchAction(q))
    }
  }, [dispatch, q])
  const searchs = useAppSelector(state => state.searcher.searchs)
  return (
    <div className={styles.root}>
      <NavBar onBack={() => navigate(-1)}>搜索结果</NavBar>
      <div className='article-list'>
        {/* <div className='article-item'>文章列表</div> */}
        {searchs.results.map(v => {
          return <ArticleItem key={v.art_id} article={v} type={v.cover.type} />
        })}
      </div>
    </div>
  )
}

export default Result
